<template>
	<view>
		<view v-if="shareView.chronicDisId">
			<view class="share-flex"
				:style="'background: url('+shareView.shareImageUrl+')no-repeat;background-size: 100% 100%;'">
				<view class="Promotion-details" @tap="promotionDetails()">
					<text class="details-title">我的推广明细</text>
				</view>
				<view class="Product-name">
					{{shareView.chronicDisName||''}}
				</view>
				<view class="share-view">
					<view class="share-view-left">
						{{shareView.shareDesc||''}}
					</view>
					<view class="share-view-btn" @tap="getPoterByChronicDisId(PosteritemCode,shareView.chronicDisId)">
						去分享
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="show" mode="center">
			<image class="poster-image" :src="path" @tap="showImage(path)" mode="widthFix"></image>
		</u-popup>
		<l-painter :board="poster" isCanvasToTempFilePath pathType="url" @success="path = $event"
			custom-style="position: fixed; left: 200%" />
		<view class="lF2-style">
			{{path}}
			<l-f2 ref="chart"></l-f2>
		</view>
	</view>
</template>

<script>
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
import lF2 from '@/uni_modules/lime-f2/components/l-f2/l-f2.vue';

import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

	export default {
		name: "fission-poster",
		components: {
			lF2,
			uPopup,
		},
		props: {
			PosteritemCode: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				tempFilePath: '',
				show: false,
				path: '',
				poster: {
					css: {
						width: "650rpx",
						height: "1210rpx",
						paddingBottom: "40rpx",
						background: "#EDEDF5"
					}
				},
				shareView: {}, //获取分享view样式
				posterData: {} //获取分享海报样式
			}
		},
		watch: {
			PosteritemCode(data) {
				this.getByCode(data)
			}
		},
		mounted() {
			// 图表
			const data = []
			this.$refs.chart.init(config => {
				config.padding = ['auto', 14, 'auto', 24]
				const chart = new F2.Chart(config);
				return chart;
			});
		},
		methods: {
			//点击放大
			showImage(url) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: [url] // 需要预览的图片http链接列表
				})
			},
			promotionDetails() {
				this.$urouter.navigateTo({
					url: '/pagesMy/my/promotionDetails/index',
					key: '',
					params: {}
				});
			},
			//待审核评论
			async canvasToTemp(data) {
				this.poster = {
					css: {
						width: "650rpx",
						height: "1210rpx",
						paddingBottom: "40rpx",
						background: "#EDEDF5"
					}
				}
				let res = await this.$refs.chart.canvasToTempFilePath();
				let tempFilePath = res.tempFilePath,
					_this = this;
				let loginKey = global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'

				uni.uploadFile({
					url: global.host+'cms-service/file',
					filePath: tempFilePath,
					fileType: 'image',
					name: 'upfile',
					header: {
						'Authorization': uni.getStorageSync(loginKey),
						userSource: 1, //用户类型 1:C端用户  2:员工
					},
					success: (resdata) => {
						uni.hideToast();
						tempFilePath = JSON.parse(resdata.data).result.url;
						if(data.diseaseNousVOS.length == 0){//没数据 生成不了bug
							for(let i = 0;i<2;i++){
								data.diseaseNousVOS[i] = {}
							}
						}
						_this.show = true
						_this.poster = {
							css: {
								width: "650rpx",
								paddingBottom: "40rpx",
								background: "#EDEDF5"
							},
							views: [{
									src: "https://static.bsyjk.cn/logo/09BC7A2243AA4753898C2494929F6153.png",
									type: "image",
									css: {
										background: "#fff",
										objectFit: "cover",
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "84rpx",
										boxSizing: "border-box",
										height: "100rpx",
									}
								},
								{
									type: "text",
									text: data.storeName||'',
									css: {
										objectFit: "cover",
										color: "#0F1A50",
										textAlign: 'center',
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "400rpx",
										fontSize: "38rpx",
										boxSizing: "border-box",
										height: "100rpx",
									}
								},
								{
									type: "image",
									src: "https://static.bsyjk.cn/marshallingbg/89FBD3719ACA4294A181BBF2DF18A1B8.png",
									css: {
										marginLeft: "40rpx",
										marginTop: "-40rpx",
										width: "580rpx",
										height: "586rpx",
									}
								},
								{
									type: "view",
									css: {
										marginLeft: "30rpx",
										marginTop: "-320rpx",
										width: "590rpx",
										height: "414rpx",
										background: "#0F1A50",
										borderRadius: '22rpx'
									},
									views: [
										{
										type: "image",
										src: _this.$basejs.httpHttps(tempFilePath), //生成7天数据
										css: {
											width: "480rpx",
											height: "374rpx",
											marginLeft: "40rpx",
											marginTop: "0rpx",

										}
									},
									{
										type: "text",
										text: '说明：图表数据仅供参考，建议记录7天以上数据更加精准。',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "54rpx",
											marginTop: "0rpx",
											width: "590rpx",
											fontSize: "14rpx",
											boxSizing: "border-box",
										},
									}
									]
								},
								{
									type: "view",
									css: {
										marginLeft: "30rpx",
										marginTop: "16rpx",
										width: "590rpx",
										height: "240rpx",
										background: "#0F1A50",
										borderRadius: '22rpx'
									},
									views: [{
										type: "text",
										text: '高血压科普小常识',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "18rpx",
											width: "590rpx",
											fontSize: "28rpx",
											boxSizing: "border-box",
										},
									}, {
										type: "view",
										css: {
											marginLeft: "27rpx",
											marginTop: "18rpx",
											width: "540rpx",
											borderTop: "1px dashed #979797"
										},
									}, {
										type: "text",
										text: '1.' + data.diseaseNousVOS[0]? data.diseaseNousVOS[0].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "580rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
										},
									}, {
										type: "text",
										text: '2.' +data.diseaseNousVOS[1]? data.diseaseNousVOS[1].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "580rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
										},
									}, {
										type: "text",
										text: '3.' +data.diseaseNousVOS[2]? data.diseaseNousVOS[2].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "580rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
										},
									}]
								},
								{
									type: "text",
									text: '这个软件可以清晰准确的记录着人们的血压，科普人们健康小常识，你也快来试一试吧！',
									css: {
										objectFit: "cover",
										color: "#0F1A50",
										textAlign: 'left',
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "350rpx",
										fontSize: "22rpx",
										boxSizing: "border-box",
										height: "100rpx",
									}
								},
								{
									src: _this.$basejs.httpHttps(data.qrCodeUrl),
									type: "image",
									css: {
										background: "#fff",
										objectFit: "cover",
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "150rpx",
										height: '150rpx',
										boxSizing: "border-box",
									}
								},
							]
						}
					},
					fail: (err) => {
						uni.hideToast();
					}
				});
				_this.tempFilePath = tempFilePath

			},
			posterfun(data) {
				let cdata = [], //收缩压
					cdata2 = [], //舒张压
					dataVOS = data.dataVOS,
					_this = this; //血压数组
				for (let i = 0; i < dataVOS.length; i++) {
					let day = this.$basejs.dataTypeday(dataVOS[i].record).y + '-' + this.$basejs.dataTypeday(dataVOS[i]
						.record).r
					cdata.unshift({
						day: day,
						type: '收缩压',
						value: dataVOS[i].first
					})
					cdata2.unshift({
						day: day,
						type: '舒张压',
						value: dataVOS[i].second,
					})

				}
				cdata = cdata.concat(cdata2)
				this.$refs.chart.reset(chart => {
					chart.clear() // 清理所有
					chart.source(cdata, {
						value: {
							tickCount: 5,
							min: 0
						},
						day: {
							range: [0, 1]
						}
					});
					chart.axis('day', {
						label: {
							fill: '#AFBCFB'
						}
					});
					chart.axis('value', {
						label: {
							fill: '#AFBCFB'
						}
					});

					chart.line().position('day*value').color('type', [
							'#17DBFF',
							'#0ED000'
						])
						.shape('smooth');
					chart.point().position('day*value')
						.color('type', ['#17DBFF', '#0ED000'])
						.shape('smooth').style({
							stroke: '#fff',
							lineWidth: 1
						});
					chart.legend({
						itemWidth: 120,
						offsetY: 0,
						offsetX: 100

					});
					chart.guide().text({
						position: ['6%', '-14%'],
						content: '血压走势',
						style: {
							fill: '#AFBCFB', // 文本颜色
							fontSize: '20', // 文本大小
						}, // 文本的图形样式属性
					});

					chart.render();
					return chart;
				});
				setTimeout(e => {
					this.canvasToTemp(data) //海报线
				}, 500)
				// 在H5平台下，tempFilePath 为 base64
			},
			getPoterByChronicDisId(code, chronicDisId) {
				uni.showLoading({
				    title: '生成海报中',
					duration: 3000
				});
				let sendData = {
					indicItemCode: code,
					chronicDisId: chronicDisId
				}
				this.$api.get(global.apiUrls.getPoterByChronicDisId, sendData).then(res => {
					if (res.data.code == 1000) {
						this.posterData = res.data.result
						this.posterfun(this.posterData)
					} else {
						uni.hideToast()
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			getByCode(code) {
				let sendData = {
					indicItemCode: code
				}
				this.$api.get(global.apiUrls.getByCode, sendData).then(res => {
					if(res.data.code == 1000){
						this.$emit('shareFun',res.data.result)
						this.shareView = res.data.result
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.share-flex {
		width: 720rpx;
		height: 290rpx;
		margin: -220rpx auto 0;

		.Promotion-details {
			padding: 120rpx 0 0 260rpx;
			color: #FF8F1F;
			font-size: 20rpx;

			.details-title {
				position: relative;
				left: 30rpx;
			}

			.details-title::before {
				content: '';
				width: 20rpx;
				height: 24rpx;
				position: absolute;
				left: -30rpx;
				background: url(http://static.bsyjk.cn/extensionIcon/1BB0A37341304A49B8029455E84EA526.png)no-repeat;
				background-size: 100% 100%;
				// background: pink;

			}
		}

		.Product-name {
			font-size: 38rpx;
			color: #fff;
			padding: 14rpx 35rpx;
		}

		.share-view {
			display: flex;
			padding: 0 35rpx;

			.share-view-left {
				width: 510rpx;
				font-size: 20rpx;
				color: #fff;
			}

			.share-view-btn {
				width: 130rpx;
				height: 50rpx;
				background: #FF8F1F;
				border-radius: 42rpx;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}

	.poster-image {
		width: 650rpx;
		height: 1210rpx;
		border-radius: 20rpx;
		// background: #fff;
	}

	.lF2-style {
		position: fixed;
		left: -9999rpx;
		top: -9999rpx
	}
</style>
